import {
  Checkbox,
  CheckboxGroup,
  Form,
  FormItem,
  message,
  Modal,
  Space,
  Textarea
} from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { riverApi } from '@/apis'
import { RejectInfo } from '@/apis/riverTypes'

import { rejectTypeOptions } from '../common'

export default defineComponent({
  name: 'RejectDialog',
  emits: ['confirm'],
  setup(props, { emit }) {
    const showDlg = ref(false)
    const confirmLoading = ref(false)
    const flag = ref(0)
    const data = ref({ auditDetailTypeTemp: [] as string[] } as RejectInfo)
    function open(id, f: number) {
      data.value.id = id
      flag.value = f
      console.log(flag.value)
      showDlg.value = true
    }

    async function handleConfirm() {
      if (!data.value.auditDetail) {
        message.error('请输入驳回理由')
        return
      }
      data.value.auditDetailType = data.value.auditDetailTypeTemp.join(',')
      try {
        confirmLoading.value = true
        if (flag.value == 1) {
          await riverApi.reject(data.value)
        }
        if (flag.value == 2) {
          await riverApi.presidentRejectReview(data.value)
        }
        emit('confirm')
      } finally {
        confirmLoading.value = false
      }
    }

    return { showDlg, confirmLoading, data, handleConfirm, open }
  },
  render() {
    return (
      <Modal
        v-model:visible={this.showDlg}
        confirmLoading={this.confirmLoading}
        title="驳回申请"
        width={700}
        destroyOnClose
        onOk={this.handleConfirm}
      >
        <Form labelCol={{ span: 4 }}>
          <FormItem label={'驳回理由'} required>
            <Textarea
              v-model:value={this.data.auditDetail}
              placeholder="请填写驳回申请理由（必填项）"
              maxlength={500}
              style={{ width: '400px' }}
            />
          </FormItem>
          <FormItem label={'错误部分'}>
            <CheckboxGroup v-model:value={this.data.auditDetailTypeTemp}>
              {rejectTypeOptions.map(item => {
                return <Checkbox value={item.value}>{item.label}</Checkbox>
              })}
            </CheckboxGroup>
          </FormItem>
        </Form>
      </Modal>
    )
  }
})
